<template>
  <Modal
    v-model="form.visible"
    :width="1000"
    :mask-closable="false"
    :loading="loading"
    :title="'领取赛事包'"
    ok-text="确认"
    @on-ok="ok">
    <Row class="mt30">
      <Col span="16" offset="4">
        <Form ref="form" :model="form.data" :rules="ruleValidate" :label-width="150">
          <div class="mt10 mb10" style="border-bottom: 1px dashed #ccc; padding-bottom: 5px;">
            已选择：<Tag type="border"
                    v-for="(item, index) in form.data.pkActNumplateLs"
                    :key="index">{{item.realName}}</Tag>
          </div>
          <FormItem prop="receivePerson" label="领取人">
            <Input v-model="form.data.receivePerson" placeholder="请输入"></Input>
          </FormItem>
          <FormItem prop="receiveTime" label="领取时间">
            <DatePicker type="datetime" style="width:100%" placeholder="选择时间" v-model="form.data.receiveTime"></DatePicker>
          </FormItem>
          <FormItem prop="receiveRemark" label="请输入领取原因">
            <Input type="textarea" v-model="form.data.receiveRemark" placeholder="请输入" :rows="4"></Input>
          </FormItem>
        </Form>
      </Col>
    </Row>
  </Modal>
</template>

<script>
  import Vue from 'vue'
  import { mapGetters } from 'vuex'
  import activityApi from '@/api/activity'

  export default {
    name: 'receive-modal',
    props: [
      'form'
    ],
    data () {
      return {
        loading: true,
        ruleValidate: {
          receivePerson: [
            { required: true, message: '请选择领取人', trigger: 'change' }
          ],
          receiveTime: [
            { required: true, type: 'date', message: '请选择领取时间', trigger: 'change' }
          ]
        }
      }
    },
    computed: {
      ...mapGetters({
        userInfo: 'userInfo'
      })
    },
    watch: {
      'form.visible': 'onClose'
    },
    methods: {
      ok () {
        this.$refs.form.validate((valid) => {
          if (valid) {
            this.submitForm()
          } else {
            this.$Message.error('表单验证失败，请检查输入项目!')
            this.form.visible = true
            this.loading = false
            setTimeout(() => {
              this.loading = true
            }, 100)
          }
        })
      },
      onClose (isVisible) {
        if (!isVisible) {
          this.$nextTick(() => {
            this.$refs.form.resetFields()
          })
        } else {
          this.defaultImageList = Vue.filter('splitImg')(this.form.data.reardImage || '')
        }
      },
      async submitForm () {
        const { body } = await activityApi.ridePackage.receive(this.form.data)
        if (this.$apiHelper.requestSuccessed(body.responseCode)) {
          this.$Message.info('领取成功')
          this.form.visible = false
          this.$emit('submit')
        } else {
          setTimeout(() => {
            this.$Modal.error({
              title: '错误',
              content: body.desc,
              onOk: () => {}
            })
            this.loading = false
          }, 500)
        }
      },
      async getActGroup () {
        this.actGroupLoading = true
        const { body } = await activityApi.group.list({
          pk_act_base_info: this.$route.params.activityId,
          currentPage: 1,
          limit: 10
        })
        const { responseData } = body
        this.actGroupList = responseData.content
        this.actGroupLoading = false
      }
    },
    async mounted () {
      this.$store.dispatch('getCode', 'act_sort')
      await this.getActGroup()
    }
  }
</script>
